<style>
.menu .ivu-table-expanded-cell {
    padding: 0;
    border: 0;
}
.el-tag {
    background-color: rgba(69, 253, 124, 0.356);
    padding: 0 5px;
    color: #32c9bc;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(69, 253, 124, 0.356);
    white-space: nowrap;
}
</style>
<template>
    <div>
        <Form ref="formInline" inline>
            <FormItem>
                <Button v-if="isAuth('sys:menu:save')" @click="addOrUpdateHandle()" type="info">新增</Button>
            </FormItem>
        </Form>
        <Table class="menu" :columns="columns10" :data="dataList" border>
            <template slot-scope="{ row }" slot="icon">
                <Icon :type="'ios-'+row.icon" />
            </template>
            <template slot-scope="{ row }" slot="type">
                <span v-if="row.type==0" class="el-tag">目录</span>
            </template>
        </Table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>
<script>
import expandRow from "@/components/menu-expand.vue";
import AddOrUpdate from "./menu-add-update";
import { treeDataTranslate } from "@/utils";
export default {
    components: { expandRow, AddOrUpdate },
    data() {
        return {
            dataForm: {},
            dataList: [],
            dataListLoading: false,
            addOrUpdateVisible: false,
            columns10: [
                {
                    type: "expand",
                    width: 50,
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row
                            }
                        });
                    }
                },
                {
                    title: "名称",
                    key: "name",
                    width: 300
                },
                {
                    title: "上级菜单",
                    width: 120,
                    key: "parentName",
                    align: "center"
                },
                {
                    title: "图标",
                    slot: "icon",
                    align: "center"
                },
                {
                    title: "类型",
                    slot: "type",
                    align: "center"
                },
                {
                    title: "排序号",
                    key: "orderNum",
                    align: "center"
                },
                {
                    title: "菜单URL",
                    key: "url",
                    align: "center",
                    ellipsis: true
                },
                {
                    title: "授权标识",
                    key: "perms",
                    align: "center",
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                        ghost: true
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {}
                                    }
                                },
                                "修改"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                        ghost: true
                                    },
                                    on: {
                                        click: () => {}
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ],
            data9: []
        };
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            this.$http({
                url: "/sys/menu/list",
                method: "get",
                params: this.$http.adornParams()
            }).then(({ data }) => {
                this.dataList = treeDataTranslate(data, "menuId");
                // console.log("this.dataList===>",this.dataList)
                this.dataListLoading = false;
            });
        },
        // 新增 / 修改
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id);
            });
        }
    }
};
</script>